<template>
  <div class="footerPc" v-if="config && windowWidth >992" >
    <footer>
      <div class="max-1200">
        <div class="form flex u-flex-wrap">
          <div class="left">
            <div class="title">
              <!--            {{globalLanguage.languageSuffix === "Cn" ? "快速物流" : "6ьICTpaЯ лorиcTИKa"}}-->
              <el-input v-model="config['fastlogistics' + globalLanguage.languageSuffix].v" size="large"
                        style="width: 200px"/>
              <el-button style="margin-left: 10px" type="success"
                         @click="changeconfigmap(config['fastlogistics'+ globalLanguage.languageSuffix])">
                {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
              </el-button>
            </div>

            <div class="sub">
              <!--            <span v-if="globalLanguage.languageSuffix === 'Cn'"-->
              <!--              >马上联系我们</span-->
              <!--            >-->
              <!--            <span-->
              <!--              v-else-if="globalLanguage.languageSuffix === 'Ra'"-->

              <!--              >Свяжитесь с нами</span-->
              <!--            >-->

              <span>
              <el-input v-model="config['contactusimmediate'+ globalLanguage.languageSuffix].v" size="large"
                        style="width: 200px"/>
              <el-button style="margin-left: 10px" type="success"
                         @click="changeconfigmap(config['contactusimmediate'+ globalLanguage.languageSuffix])">{{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}</el-button>
            </span>
            </div>

            <div class="email">
              <p>
                {{ globalLanguage.languageSuffix === 'Cn' ? "您还可以选择发邮件" : "Вы также можете выбрать почту." }}</p>

              <p>
                <el-input type="primary" v-model="config['email'].v" size="large" style="width: 200px"/>
                <el-button style="margin-left: 10px" type="success" @click="changeconfigmap(config['email'])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
            </div>

            <div class="intro">
              <!--            {{globalLanguage.languageSuffix === 'Cn'? "风速达为中国企业走进俄语国家市场提供完整、专业的一站式供应链服务!" : "Скорость ветра позволяет китайским предприятиям выйти на рынок русскоязычных стран с полным и профессиональным обслуживанием единой цепочки поставок!"}}-->
              <el-input type="textarea" :rows="4" cols="100"
                        v-model="config['fastdesc'+ globalLanguage.languageSuffix].v" size="large"
                        style="width: 200px"/>
              <el-button style="margin-left: 10px" type="success"
                         @click="changeconfigmap(config['fastdesc'+ globalLanguage.languageSuffix])">
                {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
              </el-button>
            </div>
          </div>

          <div class="right">
            <div class="group name">
              <input
                  type="text"
                  class="ipt"
                  v-model="username"
                  :placeholder="placeholderText"
              />
              <span v-if="errors.username" class="error">{{
                  errors.username
                }}</span>
            </div>
            <div class="group tel">
              <input
                  type="text"
                  class="ipt"
                  v-model="phone"
                  :placeholder="phonePlaceholder"
              />
              <span v-if="errors.phone" class="error">{{ errors.phone }}</span>
            </div>
            <div>
            <textarea
                class="result"
                v-model="content"
                :placeholder="contentPlaceholder"
            ></textarea>
              <span v-if="errors.content" class="error">{{
                  errors.content
                }}</span>
            </div>
            <button class="btn" @click="submitComment">
              {{ submitButtonText }}
            </button>
          </div>
        </div>
      </div>
    </footer>
    <div class="foot">
      <div class="top u-flex" v-if="globalLanguage.languageSuffix === 'Cn'? true : false">
        <!--       <img-->
        <!--        src="http://www.esudagz.com/template/web/default/skin/img/picture/foot_logo.png"-->
        <!--        alt=""-->
        <!--        class="logo"-->
        <!--      />-->

      </div>

      <div class="bottom">
        <div class="footInfo">
          <div class="left">
            <div class="title3">
              <el-input v-model="config['serviceproject'+ globalLanguage.languageSuffix].v" size="large"
                        style="width: 90px"/>
              <el-button type="success" style="margin-left: 10px" size="mini"
                         @click="changeconfigmap(config['serviceproject'+ globalLanguage.languageSuffix])">
                {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
              </el-button>
            </div>
            <div class="line"></div>
            <div class="item" style="line-height: 50px;">
              <p>
                <el-input v-model="config['projectname1'+ globalLanguage.languageSuffix].v" size="large"
                          style="width: 120px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['projectname1'+ globalLanguage.languageSuffix])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>
                <el-input v-model="config['projectname2'+ globalLanguage.languageSuffix].v" size="large"
                          style="width: 120px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['projectname2'+ globalLanguage.languageSuffix])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>
                <el-input v-model="config['projectname3'+ globalLanguage.languageSuffix].v" size="large"
                          style="width: 120px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['projectname3'+ globalLanguage.languageSuffix])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>
                <el-input v-model="config['projectname4'+ globalLanguage.languageSuffix].v" size="large"
                          style="width: 120px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['projectname4'+ globalLanguage.languageSuffix])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
            </div>
          </div>
          <div class="center">
            <div class="title3">
              <el-input v-model="config['contactinformation'+ globalLanguage.languageSuffix].v" size="large"
                        style="width: 90px"/>
              <el-button type="success" style="margin-left: 10px" size="mini"
                         @click="changeconfigmap(config['contactinformation'+ globalLanguage.languageSuffix])">
                {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
              </el-button>
            </div>
            <div class="line"></div>
            <div class="item" style="line-height: 50px;">
              <p>
                {{ globalLanguage.languageSuffix == "Cn" ? "企业名称：" : "Name：" }}
                <el-input v-model="config['enterprisename'+ globalLanguage.languageSuffix].v" size="large"
                          style="width: 220px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['enterprisename'+ globalLanguage.languageSuffix])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>
                {{ globalLanguage.languageSuffix == "Cn" ? "企业电话：" : "TEL：" }}
                <el-input v-model="config['tel'].v" size="large" style="width: 220px"/>
                <el-button type="success" style="margin-left: 10px" size="mini" @click="changeconfigmap(config['tel'])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>
                {{ globalLanguage.languageSuffix == "Cn" ? "邮箱：" : "E-mail：" }}
                <el-input v-model="config['email'].v" size="large" style="width: 220px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['email'])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>{{ globalLanguage.languageSuffix == "Cn" ? "企业网址：" : "Website：" }}
                <a href="javascript:void(0)" style="color: #dcdcdc; text-decoration: none;">
                  <el-input v-model="config['website'].v" size="large" style="width: 200px"/>
                </a>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['website'])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
              <p>
                {{ globalLanguage.languageSuffix == "Cn" ? "企业地址：" : "Adress： " }}
                <el-input v-model="config['address'+ globalLanguage.languageSuffix].v" size="large"
                          style="width: 200px"/>
                <el-button type="success" style="margin-left: 10px" size="mini"
                           @click="changeconfigmap(config['address'+ globalLanguage.languageSuffix])">
                  {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
                </el-button>
              </p>
            </div>
          </div>
          <div class="right">
            <div class="title3">
              <el-input v-model="config['socialplatforms'+ globalLanguage.languageSuffix].v" size="large"
                        style="width: 90px"/>
              <el-button type="success" style="margin-left: 10px" size="mini"
                         @click="changeconfigmap(config['socialplatforms'+ globalLanguage.languageSuffix])">
                {{ globalLanguage.languageSuffix === 'Cn' ? '修改' : 'Изменить' }}
              </el-button>
            </div>
            <div class="line"></div>
            <div class="imgDiv">
              <img src="@/assets/image/Wechat.jpg" alt="" class="wechat"/>
              <img src="@/assets/image/fsdm.png" alt="" class="wechat"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-footer v-else-if="config && windowWidth <=992 && shouldShowFooter">
    <div class="max-1200">
      <div class="form-group">
        <div class="form-up">
          <div class="form-up-title">{{ config['fastlogistics' + globalLanguage.languageSuffix].v }}</div>
        </div>
        <div class="sub">
          <p>{{ config['contactusimmediate' + globalLanguage.languageSuffix].v }}</p>
        </div>
        <div class="form-down">
          <el-form ref="formRef" :model="form" label-width="100px" :rules="formRules"
                   @submit.native.prevent="handleSubmit">
            <el-form-item prop="username">
              <el-input
                  class="el-input1"
                  v-model="form.username"
                  style="width: 100%"
                  :placeholder="globalLanguage.languageSuffix ==='Cn'?'请输入您的姓名':'введите ваше имя'"

              />
            </el-form-item>
            <el-form-item prop="phone">
              <el-input
                  class="el-input2"
                  v-model="form.phone"
                  style="width: 100%"
                  :placeholder="globalLanguage.languageSuffix ==='Cn'?'请输入您的联系电话':'контактный телефон'"

                  prop="phone"
              />
            </el-form-item>
            <el-form-item prop="content">
              <el-input
                  class="result"
                  id="jieguo1"
                  v-model="form.content"
                  type="textarea"

                  :placeholder="globalLanguage.languageSuffix ==='Cn'?'备注留言':'комментарий или сообщение'"
              />
            </el-form-item>

            <el-button
                native-type="submit"
                style="width: 100%; margin-top: 15px; background: linear-gradient(to right,#f6321e,#f08816); color: white;"
            >{{ globalLanguage.languageSuffix === 'Cn' ? '提交' : 'отправить' }}
            </el-button
            >
          </el-form>
        </div>
      </div>
      <div
          class="center"
          style="
              padding: 20px;
              text-align: left;
              background-color: beige;
              height: auto;
              border-radius: 10px;
              margin-bottom: 10px;
              font-size: 14px;
            "
      >
        <div style="width: 100%">
          <div style="display: flex; align-items: stretch; width: 100%;">
            <p
                style="
                  width: 40%;
                  float: left;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                   margin: 0;
                "
            >
              {{ globalLanguage.languageSuffix === 'Cn' ? '公司宣传语:' : 'компания в соцсетях:' }}
            </p>
            <div
                style="
                   width: 60%;
                  height: auto;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                "
            >

              {{ config['gsxcy' + globalLanguage.languageSuffix].v }}
            </div>
          </div>
        </div>
        <div style="width: 100%;margin-top: 20px;">
          <p style="
                  text-align: left;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                  height: 60px;
                  width: 40%;
                  float: left;
                ">
            {{ globalLanguage.languageSuffix === 'Cn' ? '公司联系方式:' : 'TEL:' }}
          </p>
          <div style="
                  width: 100%;
                  height: 60px;
                  background: linear-gradient(to right, red, blue);
                  -webkit-background-clip: text;
                  color: transparent;
                ">
            {{ config['tel'].v }}
          </div>
        </div>
      </div>
      <div class="foot1">
        <div class="foot-left" v-if="globalLanguage.languageSuffix === 'Cn'">
          <!-- <img src="../assets/img/LOGO.jpg" alt="logo" id="logo1" /> -->
          <div class="foot-link">
            <a href="">公司业务</a>| <a href="">新闻公告</a>|<a href=""
          >公司简介</a
          >| <a href="">特色服务</a>| <a href="">展会专线</a>|<a href=""
          >经典案例</a
          >
          </div>
        </div>
        <div class="foot-right">
          <div class="foot-right-up">
            <div
                class="canpyname"
                style="font-size: 9px; width: 100%; margin-left: -10px"
            >
              {{ globalLanguage.languageSuffix === 'Cn' ? '企业电话:' : 'TEL' }}：{{ config['tel'].v }}
              <span style="width: 9px; font-size: 9px; margin-left: 10px"
              >{{ globalLanguage.languageSuffix === 'Cn' ? '企业网址' : 'Website' }}:</span
              >
              <a href="">{{ config['website'].v }}</a>
            </div>
          </div>
          <div class="tel" style="font-size: 9px; width: 100%">
            {{ globalLanguage.languageSuffix === 'Cn' ? '企业名称:' : 'Name:' }}
            {{ config['enterprisename' + globalLanguage.languageSuffix].v }}
          </div>
          <div style="font-size: 9px">
            {{
              globalLanguage.languageSuffix === 'Cn' ? '公司地址' : 'Adress'
            }}：{{ config['address' + globalLanguage.languageSuffix].v }}
          </div>
          <div class="foot-right-down">
            <div
                class="foot-right-down"
                style="display: flex; align-items: center; width: 100%"
            >
              <div
                  class="email1"
                  style="font-size: 9px; width: 100%; margin-right: 10px"
              >
                {{ globalLanguage.languageSuffix === 'Cn' ? '企业邮箱' : 'E-mail' }}：{{ config['email'].v }}
              </div>
              <!-- 第三方跳转图标-->
              <!--                  <div class="u-flex" style="display: flex; width: 105px">
                                  <a href="">
                                    <img
                                        src="https://esudagz.com/template/web/default/skin/img/image/CgAGe1pV75-AZXwtAAAEDLvpyp0791.png"
                                        alt=""
                                    />
                                  </a>
                                  <a href="">
                                    <img
                                        src="https://esudagz.com/template/web/default/skin/img/image/CgAGe1pV75SAIp4QAAAE4JFWTHA154.png"
                                        alt=""
                                    />
                                  </a>
                                  <a href="">
                                    <img
                                        src="https://esudagz.com/template/web/default/skin/img/image/CgAGe1pV7_aAbHMzAAADrk_0fE0735.png"
                                        alt=""
                                    />
                                  </a>
                                </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-footer>
</template>

<script setup>
import '@/assets/css/homeview.css'
import {ref, computed, getCurrentInstance, onMounted, onUnmounted, reactive} from "vue";
import {saveComments} from "@/api/index.js"; // 引入 Axios 请求工具
const username = ref("");
const phone = ref("");
const content = ref("");
const errors = ref({}); // 用于存放错误信息
const config = ref(null);
const route = useRoute();
import {finconfigmap, updateConfigMap} from "@/api/index.js";
import {ElMessage} from "element-plus";

const windowWidth = ref(0);
// 获取Vue实例的全局属性中的语言相关对象
const globalLanguage = getCurrentInstance().appContext.config.globalProperties.globalLanguage;
import "../index.css";
import {useRoute} from "vue-router";
// 提交评论的函数
const submitComment = async () => {
  // 清空以前的错误信息
  errors.value = {};
  // 验证输入
  if (globalLanguage.languageSuffix === "Cn") {
    if (username.value.length < 2) {
      errors.value.username = "姓名必须至少两位字符";
    }
    if (!phone.value) {
      errors.value.phone = "手机号码不能为空";
    } else {
      // 简单的手机号码格式验证
      const phonePattern = /^[1][3-9][0-9]{9}$/;
      if (!phonePattern.test(phone.value)) {
        errors.value.phone = "手机号码格式不正确";
      }
    }
    if (!content.value) {
      errors.value.content = "备注留言不能为空";
    }
  }
  if (globalLanguage.languageSuffix === "Ra") {
    if (username.value.length < 2) {
      errors.value.username = "Имя должно быть не менее двух символов";
    }
    if (!phone.value) {
      errors.value.phone = "Номер телефона не может быть пустым";
    } else {
      // 简单的手机号码格式验证
      const phonePattern = /^[1][3-9][0-9]{9}$/;
      if (!phonePattern.test(phone.value)) {
        errors.value.phone = "Номера телефонов неправильные";
      }
    }
    if (!content.value) {
      errors.value.content = "Сообщение не может быть пустым";
    }
  }

  // 如果有错误，停止执行
  if (Object.keys(errors.value).length > 0) {
    return;
  }

  // 创建请求参数
  const data = {
    username: username.value,
    phone: phone.value,
    content: content.value,
  };

  try {
    // 使用 Axios 发送 POST 请求
    const response = await saveComments(data);
    console.log("成功:", response);
    alert("提交成功！");

    // 清空输入框
    username.value = "";
    phone.value = "";
    content.value = "";
  } catch (error) {
    console.error("错误:", error);
    alert("提交失败，请重试。");
  }
};

/*configmap的修改配置信息*/
const changeconfigmap = async (data) => {
  try {
    const response = await updateConfigMap(data);
    ElMessage.success("修改配置成功")
    console.log(response);
  } catch (error) {
    console.error("修改配置失败:", error);
  }
}

const getList = async () => {
  try {
    const data = await finconfigmap();
    let aa = {}
    for (let item of data.configMapList) {
      aa[item.k] = {
        v: item.v,
        id: item.id
      };
    }
    config.value = aa;
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};
getList();

// 计算属性，根据 languageSuffix 动态返回占位符
const placeholderText = computed(() => {
  if (globalLanguage.languageSuffix == "Cn") {
    return "姓名";
  } else if (globalLanguage.languageSuffix == "Ra") {
    return "Bbeдnte bawe nmA";
  }
  return ""; // 默认返回为空
});

// 计算属性，根据 languageSuffix 动态返回手机号码占位符
const phonePlaceholder = computed(() => {
  return globalLanguage.languageSuffix === "Ra"
      ? "KOHTKTHbЙ TenepOH"
      : "手机号码";
});

// 计算属性，根据 languageSuffix 动态返回备注留言占位符
const contentPlaceholder = computed(() => {
  return globalLanguage.languageSuffix === "Ra"
      ? "KOMMeHTapNЙ Wли CoooЩeHue"
      : "备注留言";
});

// 计算属性，根据 languageSuffix 动态返回提交按钮文本
const submitButtonText = computed(() => {
  return globalLanguage.languageSuffix === "Ra" ? "Отправить" : "提交";
});


/*监听窗口大小变化*/
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
onMounted(() => {
  // 初始化 windowWidth
  windowWidth.value = window.innerWidth;
  // 获取 config 数据
  getList();
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

/*mbphone底部是否显示*/
const shouldShowFooter = computed(() => {
  return !route.path.includes('/new') && !route.path.includes('/newsDetail') && !route.path.includes('/case') && !route.path.includes('/jdalxq')
})

//提交留言
const form = reactive({
  username: "",
  phone: "",
  content: "",
});
const formRef = ref(null);
const formRules = reactive({

  username: [
    {required: true, message: "请输入您的姓名", trigger: "blur"},
    {min: 2, max: 10, message: "姓名必须至少两位字符", trigger: "blur"},
  ],
  phone: [
    {required: true, message: "请输入您的联系电话", trigger: "blur"},
    {
      validator: (rule, value, callback) => {
        const phonePattern = /^[1][3-9][0-9]{9}$/;
        if (!phonePattern.test(value)) {
          callback(new Error("手机号码格式不正确"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  content: [
    {required: true, message: "请输入您的留言内容", trigger: "blur"},
    {min: 5, max: 500, message: "内容必须至少五个字符", trigger: "blur"},
  ],

});
/*校验后调用留言*/
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 表单校验通过，执行提交操作
      message();
    } else {
      // 表单校验失败，提示用户
      ElMessage.error({
        message: '请输入完整表单内容',
        offset: 100 // 设置偏移量
      });
      return false;
    }
  });
};
/* 留言 */
const message = async () => {
  const res = await saveComments(form);
  if (res.code === 200) {
    ElMessage.success({
      message: '留言成功',
      offset: 100 // 设置偏移量
    })
    console.log(ElMessage, "ElMessage")
    form.usename = "";
    form.phone = "";
    form.content = "";
  } else {
    ElMessage.error(res.msg);
  }
};
</script>

<style>
.error {
  color: white;
  font-size: 12px;
}
</style>
